<template>
  <div>
    <el-table
      :data="tableData"
      stripe
      style="width: 100%"
    >
      <el-table-column prop="inDate" label="提交时间" width="200" />
      <el-table-column prop="result" label="结果" width="250">
        <template slot-scope="scope">
          <div :style="{color: resultMap[scope.row.result].color,fontWeight: 'bold'}">
            {{ resultMap[scope.row.result].result }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="num" label="题目">
        <template slot-scope="scope">
          <el-link :style="{color:'#3498db'}" @click="goEditor(scope.row.problemId)">{{ String.fromCharCode(scope.row.num+65) }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="language" label="语言">
        <template slot-scope="scope">
          {{ showLanguage(scope.row.language).label }}
        </template>
      </el-table-column>
      <el-table-column prop="memory" label="内存">
        <template slot-scope="scope">
          {{ scope.row.memory }} KB
        </template>
      </el-table-column>
      <el-table-column prop="time" label="耗时">
        <template slot-scope="scope">
          {{ scope.row.time }} ms
        </template>
      </el-table-column>
      <el-table-column prop="nick" label="用户">
        <template slot-scope="scope">
          <div v-if="!scope.row.nick" style="color: #e74c3c">已注销</div>
          <div v-if="scope.row.nick">{{ scope.row.nick }}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 20px;"
      background
      :current-page="currentPage"
      :page-sizes="[25, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalNum"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { languageOptions, resultMap } from '@/utils/global'
import { getUserId } from '@/utils/auth'
import { solutionContest } from '@/api/contest'

export default {
  name: 'ContestStatus',
  props: {
    contestId: {
      type: String,
      default: -1
    }
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 25,
      totalNum: 0,
      languageOptions: languageOptions,
      resultMap: resultMap,
      tableData: [{
        inDate: '2016-05-02 01:01:01',
        result: '3',
        num: 0,
        language: 0,
        memory: 1000,
        time: 11,
        nick: '不如守中'
      }]
    }
  },
  created() {
    this.solutionContest()
  },
  methods: {
    solutionContest() {
      solutionContest({
        current: this.currentPage,
        size: this.pageSize,
        contestId: this.contestId,
        userId: getUserId()
      }).then(res => {
        this.totalNum = Number(res.data.total)
        this.tableData = res.data.records
      })
    },
    goEditor(problemId) {
      this.$router.push({
        path: '/editor',
        query: { problemId: problemId, contestId: this.contestId }
      })
    },
    showLanguage(item) {
      return this.languageOptions.find(t => t.num === Number(item))
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.solutionContest()
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.solutionContest()
    }
  }
}
</script>

<style scoped>

</style>
